{% extends 'base.html' %}

{% block title %}
    学生 - {{ rid }} {{ name }}_电气信息学院请假管理系统
{% endblock title %}

{% block body %}
    <div class="container d-flex align-items-center" style="width: 120%;height: calc(100% - 62px);">
        <div class="itemcard">
            <div class="itemcard-menu">
                <ul class="pagination">
                    <li data-itemcard-menu="1" class="page-item active"><button class="page-link"><i class="fa fa-address-card me-2"></i>用户信息</button></li>
                    <li data-itemcard-menu="2" class="page-item"><button class="page-link"><i class="fa fa fa-list-alt me-2"></i>请假</button></li>
                    <li data-itemcard-menu="3" class="page-item"><button class="page-link"><i class="fa fa fa-list-alt me-2"></i>销假</button></li>
                    <li data-itemcard-menu="4" class="page-item"><button class="page-link"><i class="fa fa fa-list-alt me-2"></i>已完成</button></li>
                    <li data-itemcard-menu="5" class="page-item disabled"><button class="page-link"><i class="fa fa-cogs me-2"></i>设置</button></li>
                </ul>
            </div>
            <div data-itemcard-page="1" class="itemcard-page active">
                <div class="container">
                    <div class="row h-100 flex-nowrap align-items-center justify-content-center">
                        <div class="col col-2 col-lg-2 col-sm-3">
                            {% include 'includes/headcard.html' %}
                        </div>
                        <table class="col col-8 table table-striped table-bordered m-0" border="3" style="width: 66%;background-color: #fff;">
                            <thead>
                                <tr><th colspan="4">学生信息</th></tr>
                            </thead>
                            <tbody>
                                <tr><td>学号</td><td>{{ rid }}</td><td>学部</td><td>{{ department }}</td></tr>
                                <tr><td>姓名</td><td>{{ name }}</td><td>系别</td><td>{{ faculty }}</td></tr>
                                <tr><td>性别</td><td>{{ gender }}</td><td>专业</td><td>{{ major }}</td></tr>
                                <tr><td>-</td><td>-</td><td>班级</td><td>{{ _class }}</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div data-itemcard-page="2" class="itemcard-page">
                <div class="container">
                    <div class="row">
                        <div id="leaveToolbar" class="col button-group">
                            <button class="btn btn-danger" id="btnRecall">撤回申请<i class="fa fa-trash-o ms-2"></i></button>
                            <button class="btn btn-primary" id="btnNewLeave">新建申请<i class="fa fa-plus-circle ms-2"></i></button>
                        </div>
                        <table id="applyTable" class="col"></table>
                    </div>
                </div>
            </div>
            <div data-itemcard-page="3" class="itemcard-page">
                <div class="container">
                    <div class="row">
                        <div id="reportToolbar" class="col button-group">
                            <button class="btn btn-primary" id="btnRevoke">申请销假<i class="fa fa-location-arrow ms-2"></i></button>
                        </div>
                        <table id="revokeTable" class="col"></table>
                    </div>
                </div>
            </div>
            <div data-itemcard-page="4" class="itemcard-page">
                <div class="container">
                    <div class="row">
                        <table id="doneTable" class="col"></table>
                    </div>
                </div>
            </div>
            <div data-itemcard-page="5" class="itemcard-page">
                设置
            </div>
        </div>
    </div>
{% endblock body %}

{% block script %}
    <script>
        let applyTable = revokeTable = doneTable = null;
        $('[data-itemcard-menu="2"]').on('click', () => {
            if(applyTable) return $('#applyTable').bootstrapTable('refresh', {});
            applyTable = $('#applyTable').bootstrapTable({
                locale: 'zh-CN',
                toolbar: '#leaveToolbar',
                toolbarAlign: 'left',
                buttonsOrder: ['paginationSwitch', 'toggle', 'fullscreen', 'refresh', 'columns'],
                showPaginationSwitch: true,
                showToggle: true,
                showFullscreen: true,
                showRefresh: true,
                showColumns: true,
                showButtonText: false,
                showHeader: true,
                showFooter: false,
                pagination: true,
                search: true,
                searchTimeOut: 300,
                minimumCountColumns: 3,
                clickToSelect: true,
                multipleSelectRow: true,
                sortable: true,
                sortName: 'apply_timestamp',
                sortOrder: 'desc',
                sortStable: false,
                rowStyle: function(row, index) {
                    let classes = '', css = '';
                    switch(row.state) {
                        case '待审批':
                            classes = 'table-warning';
                            break;
                        case '审批中':
                            classes = 'table-info';
                            break;
                    }
                    return {
                        classes: classes,
                        css: css,
                    }
                },
                url: '/student/leaves?query=apply',
                columns: [{
                    field: 'radio',
                    title: '单选',
                    radio: true,
                }, {
                    field: 'id', 
                    title: '编号', 
                    sortable: true,
                    align: 'center',
                    width: 1,
                }, {
                    field: 'apply_timestamp', 
                    title: '申请日期', 
                    sortable: true,
                    align: 'center',
                }, {
                    field: 'category', 
                    title: '类别', 
                    sortable: true,
                    align: 'center', 
                }, {
                    field: 'start_timestamp', 
                    title: '开始日期', 
                    sortable: true,
                    align: 'center',
                }, {
                    field: 'end_timestamp', 
                    title: '结束日期', 
                    sortable: true,
                    align: 'center',
                }, {
                    field: 'reason', 
                    title: '原因', 
                    sortable: true,
                }, {
                    field: 'a1', 
                    title: '辅导员审批', 
                    sortable: true,
                    align: 'center', 
                }, {
                    field: 'a2', 
                    title: '教务处审批', 
                    sortable: true,
                    align: 'center', 
                }, {
                    field: 'state', 
                    title: '状态', 
                    sortable: true,
                    align: 'center', 
                }],
                totalField: 'length',
                dataField: 'data',
                idField: 'sid',
            }),
            bindDragSelectEvent({
                $table: applyTable, 
            }),
            $('#btnRecall').on('click', function() {
                let leave = $('#applyTable').bootstrapTable('getSelections').at(0);
                if(!leave) return dialogWarning('未选择任何数据!');
                if(leave.state !== '审批中' && leave.state !== '待审批') return dialogWarning('无法撤回该请假条!');
                dialogConfirm('撤回申请', "确定撤回申请吗?", () => {
                    let form = new FormData();
                    form.append('id', leave.id);
                    form.append('action', 'recall');
                    $.ajax({
                        async: !1,
                        crossDomain: !0,
                        type: 'post',
                        url: '/student/leaves',
                        headers: {
                            "cache-control": "no-cache"
                        },
                        processData: !1,
                        contentType: !1,
                        mimeType: "multipart/form-data",
                        data: form
                    }).done((function(data) {
                        $('#applyTable').bootstrapTable('refresh', {});
                    })).fail((function(jqXHR) {
                        dialogError(JSON.parse(jqXHR.responseText).msg);
                    }));
                });
            }),
            createConfirmModal({
                $button: $('#btnNewLeave'),
                id: 'addLeaveModal',
                title: '新建请假申请',
                body: '<form id="addForm" class="container rounded mx-auto"> <div class="form-floating"> <select class="form-select" id="inputCategory"> <option value="事假">事假</option> <option value="公假">公假</option> <option value="病假">病假</option> <option value="出校申请">出校申请</option> </select> <label class="form-label float-start" for="inputCategory">类别</label> </div> <div class="form-floating mt-3"> <input class="form-control" type="datetime-local" id="inputStartDatatime"> <label class="form-label" for="inputStartDatatime">开始日期</label> </div> <div class="form-floating mt-3"> <input class="form-control" type="datetime-local" id="inputEndDatetime"> <label class="form-label" for="inputEndDatetime">结束日期</label> </div> <div class="form-floating mt-3"> <textarea class="form-control h-25" id="inputReason"></textarea> <label class="form-label" for="inputReason">原因</label> </div> </form>',
                buttonClick: function() {

                },
                confirmClick: function(e, $modal, $button) {
                    let category = $('#inputCategory').val(), sd = $('#inputStartDatatime').val(), ed = $('#inputEndDatetime').val(), reason = $('#inputReason').val();
                    if(!category || !sd || !ed) {
                        return dialogWarning('类别、开始日期和结束日期不能为空!');
                    }
                    if(ed < sd) return dialogWarning('结束日期必须大于开始日期!');
                    let form = new FormData();
                    form.append('category', category),
                    form.append('start_timestamp', sd),
                    form.append('end_timestamp', ed),
                    form.append('reason', reason);
                    form.append('action', 'apply');
                    $.ajax({
                        async: !1,
                        crossDomain: !0,
                        type: 'post',
                        url: '/student/leaves',
                        headers: {
                            "cache-control": "no-cache"
                        },
                        processData: !1,
                        contentType: !1,
                        mimeType: "multipart/form-data",
                        data: form
                    }).done(() => {
                        $(this).siblings().first().click(),
                        $('#applyTable').bootstrapTable('refresh', {}),
                        $modal.hide();
                    }).fail(function(jqXHR) {
                        dialogError(JSON.parse(jqXHR.responseText).msg);
                    });
                },
            });
        }),
        $('[data-itemcard-menu="3"]').on('click', () => {
            if(revokeTable) return $('#revokeTable').bootstrapTable('refresh', {});
            revokeTable = $('#revokeTable').bootstrapTable({
                locale: 'zh-CN',
                toolbar: '#reportToolbar',
                toolbarAlign: 'left',
                buttonsOrder: ['paginationSwitch', 'toggle', 'fullscreen', 'refresh', 'columns'],
                showPaginationSwitch: true,
                showToggle: true,
                showFullscreen: true,
                showRefresh: true,
                showColumns: true,
                showButtonText: false,
                showHeader: true,
                showFooter: false,
                pagination: true,
                search: true,
                searchTimeOut: 300,
                minimumCountColumns: 3,
                clickToSelect: true,
                multipleSelectRow: true,
                sortable: true,
                sortName: 'apply_timestamp',
                sortOrder: 'desc',
                sortStable: false,
                rowStyle: function(row, index) {
                    let classes = '', css = '';
                    switch(row.state) {
                        case '待销假':
                            classes = 'table-warning';
                            break;
                        case '销假中':
                            classes = 'table-info';
                            break;
                    }
                    return {
                        classes: classes,
                        css: css,
                    }
                },
                url: '/student/leaves?query=revoke',
                columns: [{
                    field: 'radio',
                    title: '单选',
                    radio: true,
                }, {
                    field: 'id', 
                    title: '编号', 
                    sortable: true,
                    align: 'center',
                    width: 1,
                }, {
                    field: 'apply_timestamp', 
                    title: '申请日期', 
                    sortable: true,
                    align: 'center',
                }, {
                    field: 'category', 
                    title: '类别', 
                    sortable: true,
                    align: 'center', 
                }, {
                    field: 'start_timestamp', 
                    title: '开始日期', 
                    sortable: true,
                    align: 'center',
                }, {
                    field: 'end_timestamp', 
                    title: '结束日期', 
                    sortable: true,
                    align: 'center',
                }, {
                    field: 'reason', 
                    title: '原因', 
                    sortable: true,
                }, {
                    field: 'a1', 
                    title: '辅导员审批', 
                    sortable: true,
                    align: 'center', 
                }, {
                    field: 'a2', 
                    title: '教务处审批', 
                    sortable: true,
                    align: 'center', 
                }, {
                    field: 'state', 
                    title: '状态', 
                    sortable: true,
                    align: 'center', 
                }],
                totalField: 'length',
                dataField: 'data',
                idField: 'sid',
            }),
            bindDragSelectEvent({
                $table: revokeTable, 
            }),
            $('#btnRevoke').on('click', function() {
                let leave = $('#revokeTable').bootstrapTable('getSelections').at(0);
                if(!leave) return dialogWarning('未选择任何数据!');
                if(leave.state !== '待销假') return dialogWarning('该请假条无法销假!');
                dialogConfirm('申请销假', "确定申请销假吗?", () => {
                    let form = new FormData();
                    form.append('id', leave.id);
                    form.append('action', 'revoke');
                    $.ajax({
                        async: !1,
                        crossDomain: !0,
                        type: 'post',
                        url: '/student/leaves',
                        headers: {
                            "cache-control": "no-cache"
                        },
                        processData: !1,
                        contentType: !1,
                        mimeType: "multipart/form-data",
                        data: form
                    }).done((function(data) {
                        $('#revokeTable').bootstrapTable('refresh', {});
                    })).fail((function(jqXHR) {
                        dialogError(JSON.parse(jqXHR.responseText).msg);
                    }));
                });
            });
        }),
        $('[data-itemcard-menu="4"]').on('click', () => {
            if(doneTable) return $('#doneTable').bootstrapTable('refresh', {});
            doneTable = $('#doneTable').bootstrapTable({
                locale: 'zh-CN',
                buttonsOrder: ['paginationSwitch', 'toggle', 'fullscreen', 'refresh', 'columns'],
                showPaginationSwitch: true,
                showToggle: true,
                showFullscreen: true,
                showRefresh: true,
                showColumns: true,
                showButtonText: false,
                showHeader: true,
                showFooter: false,
                pagination: true,
                search: true,
                searchTimeOut: 300,
                minimumCountColumns: 3,
                clickToSelect: true,
                multipleSelectRow: true,
                sortable: true,
                sortName: 'apply_timestamp',
                sortOrder: 'desc',
                sortStable: false,
                rowStyle: function(row, index) {
                    let classes = '', css = '';
                    switch(row.state) {
                        case '已完成':
                            classes = 'table-success';
                            break;
                        case '已撤回':
                            classes = 'table-light';
                            break;
                        case '已驳回':
                            classes = 'table-danger';
                            break;
                    }
                    return {
                        classes: classes,
                        css: css,
                    }
                },
                url: '/student/leaves?query=done',
                columns: [{
                    field: 'id', 
                    title: '编号', 
                    sortable: true,
                    align: 'center',
                    width: 1,
                }, {
                    field: 'apply_timestamp', 
                    title: '申请日期', 
                    sortable: true,
                    align: 'center',
                }, {
                    field: 'category', 
                    title: '类别', 
                    sortable: true,
                    align: 'center', 
                }, {
                    field: 'start_timestamp', 
                    title: '开始日期', 
                    sortable: true,
                    align: 'center',
                }, {
                    field: 'end_timestamp', 
                    title: '结束日期', 
                    sortable: true,
                    align: 'center',
                }, {
                    field: 'reason', 
                    title: '原因', 
                    sortable: true,
                }, {
                    field: 'a1', 
                    title: '辅导员审批', 
                    sortable: true,
                    align: 'center', 
                }, {
                    field: 'a2', 
                    title: '教务处审批', 
                    sortable: true,
                    align: 'center', 
                }, {
                    field: 'r', 
                    title: '销假人', 
                    sortable: true,
                    align: 'center', 
                    visible: false,
                }, {
                    field: 'state', 
                    title: '状态', 
                    sortable: true,
                    align: 'center', 
                }],
                totalField: 'length',
                dataField: 'data',
                idField: 'sid',
            });
            bindDragSelectEvent({
                $table: doneTable, 
            });
        });
    </script>
{% endblock %}
